<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Lyscms+ Mall | 商城</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/layui/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <style>
        .desc > p {
            font-size: 14px;
            font-weight: 300;
            line-height: 30px;
        }

        .product_img {
            background-color: #FFFFFF;
            border-radius: 3px;
            border: 1px solid #e1e1e1;
        }

        .product_info > p {
            margin: 20px 0;
            text-align: right;
        }

        .product_info > .title {
            font-weight: bold;
            text-align: left;
            color: #4e54c8;
            word-break: break-all;
        }

        .size1 {
            font-size: 20px;
        }

        .product_info > .price {
            font-weight: 500;
            color: #1e1e1e;
        }

        .size2 {
            font-size: 24px;
        }

        .product_info > p > .price1 {
            font-weight: bold;
            color: #FF5722;
        }

        .size3 {
            font-size: 30px;
        }
    </style>
</head>
<body class="site-home">
<!--头部模块-->
<div th:replace="mall/common::head"></div>
<div class="layui-container" id="content">
    <!--商品详情-->
    <div class="layui-row" style="margin-top: 10px;">
        <div class="layui-row" id="product">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <img class="product_img img_responsive" th:src="${product.image}"/>
            </div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                <div class="product_info">
                    <input type="hidden" id="productId" th:value="${product.id}"/>
                    <p th:text="${product.title}" class="title size1"></p>
                    <div style="background: #e6e6e6;text-align: right;padding: 20px 5px">
                        <p class="price size2">商城价：<span class="price1 size3" th:text="${product.shopPrice}"></span></p>
                        <p class="price size2">市场价：<span class="" th:text="${product.marketPrice}"></span></p>
                    </div>
                    <p>
                        <button onclick="addCart()" style="background: #4e54c8;"
                                class="layui-btn layui-btn-lg layui-btn-radius layui-btn-danger">加入购物车
                        </button>
                    </p>
                </div>
            </div>
        </div>
        <div class="layui-row" style="margin-top: 50px;text-align: center;">
            <fieldset class="layui-elem-field">
                <legend style="font-weight: 700"><i class="fa fa-heart" style="color: #FF5722;"></i>商品描述<i
                        class="fa fa-heart" style="color: #FF5722;"></i></legend>
                <div class="layui-field-box desc">
                    <p th:text="${product.desc}"></p>
                    <hr class="layui-bg-green"/>
                    <img class="img_responsive" th:src="${product.image}"/>
                </div>
            </fieldset>
        </div>
    </div>
    <script>
        //        <![CDATA[
        function addCart() {
            var productId = $("#productId").val();
            if (!productId) {
                layer.msg("错误！");
                return;
            }

            $.get("addCart.do?productId=" + productId, function (data) {
                if (data.state == 0) {
                    layer.msg("添加购物车成功！");
                } else {
                    layer.msg(data.message);
                }
            });
        }


        //移动端页面优化
        var device = layui.device();
        if (device.weixin || device.ios || device.android) {
            $(".product_info p").attr("style", "margin-left: 0;margin-bottom: 0;");
            $(".layui-btn").attr("style", "width:100%");
            $(".size1").addClass("price2").removeClass("size1");
            $(".size2").addClass("price2").removeClass("size2");
            $(".size3").addClass("price2").removeClass("size3");
        }
        //        ]]>
    </script>
</div>
<!--底部-->
<div th:replace="mall/common::foot"></div>
</body>
</html>
